<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>多窗口传值交互演示</title>
<link type="text/css" rel="stylesheet" href="js/prettify/prettify.css" />
<link type="text/css" rel="stylesheet" href="js/demo.css" />
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="js/prettify/prettify.js" type="text/javascript"></script>
<script type="text/javascript">
	// JavaScript Document
var _search = window.location.search,lhg_skins,_Skin_tmpl;
if(_search){
	lhg_skins = _search.split("=")[1];
}
document.write('<scr'+'ipt src="../lhgdialog.js?skin=' + (lhg_skins || 'default') +'"></sc'+'ript>');
var _Skin_tmpl  = function (data) {
	var html = ['<table class="skintabs" style="width:480px"><tbody>'];
	for (var i = 0, length = data.length; i < length; i ++) {
		html.push('<tr class="');
		html.push(i%2 ? 'odd' : '');
		html.push('"><th style="width:7em"><a href="?skin=');
		html.push(data[i].name);
		html.push('">');
		html.push(data[i].name);
		html.push('</a></th><td>');
		html.push(data[i].about);
		html.push('</td></tr>');
	};
	html.push('</tbody></table>');
	return html.join('');
}([
	{ name: 'default', about: '默认皮肤,简单的纯CSS灰色皮肤。' },
	{ name: 'qq2011', about: '仿QQ2011弹出窗口的蓝色渐变皮肤，纯CSS' },
	{ name: 'blue', about: '蓝色简约风格皮肤,大气十足，纯CSS' },
	{ name: 'discuz', about: 'discuz论坛极简皮肤，相当实用，纯CSS' },
	{ name: 'idialog', about: '苹果电脑风格的弹窗皮肤，很不错的(包含图片)' }
]);

function reload(){
	//alert(11111);
	$.dialog.tips("正在加载数据...","loading.gif").time(3);
}

/** 多皮肤演示 */
function sk1(){
	var a = $.dialog({
		id: "sk1",
		title: "丰富多彩的皮肤",
		content: _Skin_tmpl
	});
}
	function va1(){
		var a = $.dialog({
			id: "va_1",
			title: "窗口取值",
			content: "url:test01.html",
			width: 350,
			height: 200
		});	
		$.dialog.data( "txt01", $("#txt1").val() );	
	}
	function va2(){
		$.dialog.data("islogin", false);
		var a = $.dialog({
			id: "va_2",
			title: "lhgDialog登录",
			titleIcon: "lhg.png",
			content: "url:test02.html",
			resize: false,
			max: false,
			min: false,
			drag: false,
			lock: true,
			cancel: false
		});	
	}
</script>
</head>
<body>
<div class="title_top r5px">
	<ul>
    	<li class="button orange r5px"><a target="_blank" href="http://bbs.lhgcore.com/">返回论坛</a></li>
        <li class="button blue"><a target="_blank" href="http://bbs.lhgcore.com/thread-49-1-1.html">返回帖子</a></li>
        <li class="button blue"><a target="_blank" href="http://bbs.lhgcore.com/thread-51-1-1.html ">提交Bug</a></li>
		<li class="button blue"><a href="../index.html">在线演示</a></li>
    	<li class="button blue"><a href="extents.html">扩展演示</a></li>
        <li class="button green"><a href="valuedemo.html">传值演示</a></li>
        <li class="button blue"><a href="javascript:;" onclick="sk1()">切换皮肤</a></li>
        <li class="button orange"><a href="../api/api.html" target="_blank">API文档</a></li>
    </ul>
</div>

<div class="container r5px">
<div id="gads">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-4209163873016654";
/* gads_demo_首页3 */
google_ad_slot = "2866430416";
google_ad_width = 728;
google_ad_height = 90;
//-->
<!--
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
    <div class="header"><h1 class="colb f1"><span class="colr">lhgDailog4正式发布beta1版本，</span>感谢大家长期的支持。</h1></div>
    <div class="article">
        <h2>多窗口传值交互演示</h2>
		<ol>
        	<li>
            	<h3>将调用页面的数据传到弹出窗口中</h3>
            	<pre class="prettyprint">
/** 调用页面JS */
var a = $.dialog({
    id: "va_1",
    title: "窗口取值",
    content: "url:test01.html",
    width: 350,
    height: 200
    });	
$.dialog.data( "txt01", $("#txt1").val() );</pre>
				<pre class="prettyprint">
/** test01.html 页面JS 调用页面通过( var api = frameElement.api, W = api.opener, D = document; 获取Window对象) */
var val = W.$.dialog.data('txt01');
$("#txt01").val(val);

/** 在test01.html 页面点击按钮，将文本框中的数据传回调用页面 */
/** #txt2 为调用页面的一个文本框 W = = api.opener */
$("#btn_sub").bind("click", function(){
    W.$("#txt2").val($("#txt01").val());
});
                </pre>
				<input type="text" class="text" value="我都使用lhgDialog4了" id="txt1" />
                <button class="button green" onclick="va1()">运行»</button>
                <input type="text" class="text" id="txt2" />
            </li>
            <li>
            	<h3>完整的登录演示页面</h3>
                <pre class="prettyprint">
/** 调用页面JS */
$.dialog.data("islogin", false);
var a = $.dialog({
    id: "va_2",
    title: "lhgDialog登录",
    content: "url:test02.html",
    resize: false,
    max: false,
    drag: false,
    lock: true,
    cancel: false
});	</pre>
                <pre class="prettyprint">
/** 弹出登录页面代码 */
/** 弹出页面代码较为多，主要配合jquery_validation插件做了验证 */
                </pre>
                <button class="button green" onclick="va2()">运行登录»</button>
            </li>
		</ol>
        <br/><br/>
        <h2>更多API组合DEMO，请自行阅读API之后编写测试。</h2><br/>
    </div>
    <div class="footer"></div>
</div>
<script type="text/javascript">prettyPrint();</script>
</body>
</html>
